<template>
    <!-- 子传父defineEmits -->
    <div class="frist_crumbs">
        <a href="javascript:void(0)" @click="isCollapse = !isCollapse" :title="isCollapse ? '展开' : '折叠'">
            <!-- 给图标动态绑定旋转动画 -->
            <el-icon color="#606266">
                <i class="iconfont icon-zhedie"
                    :style="{ transform: 'rotate(' + (isCollapse ? -180 : 0) + 'deg)' }"></i>
            </el-icon>
        </a>
        <!-- 面包屑组件 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index/homepage' }">{{ $t('homepage') }}</el-breadcrumb-item>
            <template v-for="item in $route.matched.slice(1)" :key="item.name">
                <template v-if="item.name != 'homepage'">
                    <el-breadcrumb-item>{{ $t(item.meta.title as string)}}</el-breadcrumb-item>
                </template>
            </template>
        </el-breadcrumb>
    </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, watch } from 'vue'//引入响应式,监听,子传父方法
import { ArrowRight } from '@element-plus/icons-vue'//引入面包屑朝右箭头组件
const isCollapse = ref(false) //声明折叠变量，默认不折叠
const emit = defineEmits<{
    (e: 'changeCollapse', isCollapse: boolean): void //第一个参数代表e--事件源,第二参数代表传的值
}>()
watch(isCollapse, (isCollapse) => {//监听发生变化，并且传值，第一个参数代表自定义事件名，第二个参数代表要传的值
    emit('changeCollapse', isCollapse)
})
</script>

<style lang="less" scoped>
.frist_crumbs {
    width: 76%;
    margin-left: 20px;


    a {
        text-decoration: none;
    }

    i {

        transition: all 0.5s;
    }

    .el-breadcrumb {
        position: absolute;
        top: 21px;
        left: 52px;
    }

}
</style>